<!-- 首页 -->
<template>
  <div class="Home">
    <el-row>
      <div class="banner-box">
        <div class="banner">
          <img src="@/assets/h.png" alt="" />
        </div>
      </div>
    </el-row>

    <transition
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__lightSpeedInLeft"
      leave-active-class="animate__lightSpeedOutRight"
    >
      <el-row class="content">
        <el-col
          :xl="{ span: 12, offset: 2 }"
          :lg="{ span: 12, offset: 2 }"
          :md="{ span: 12, offset: 2 }"
          :xs="24"
          :sm="24"
        >
          <div class="article-box" key="1">
            <div
              class="article"
              v-for="(art, index) in articles"
              :key="index"
              @click="$router.push(`/article/${art.a_id}`)"
              v-show="articles.length != 0"
            >
              <Article :article="art" />
            </div>
            <div v-show="articles.length == 0">暂时没有文章哦~</div>
          </div>
        </el-col>
        <el-col
          :xl="{ span: 8, offset: 1 }"
          :lg="{ span: 8, offset: 1 }"
          :md="{ span: 8, offset: 1 }"
          :xs="24"
          :sm="24"
        >
          <rightNav />
        </el-col>
        <!-- <el-backtop target=".content"></el-backtop> -->
      </el-row>
    </transition>
  </div>
</template>


<script>
import rightNav from "@/components//rightNav.vue";
import Article from "../article/Article.vue";
import { getAllArticle } from "../../api/article";
export default {
  name: "Home",
  data() {
    return {
      search: "",
      articles: [],
    };
  },
  methods: {
    async getArticle() {
      try {
        const { data } = await getAllArticle();
        if (data.status === 401) {
          return this.$message.error(data.msg);
        }
        if (data.status === 200) {
          this.articles = data.data;
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
  components: {
    rightNav,
    Article,
  },
  created() {
    this.getArticle();
  },
};
</script>

<style lang="less" scoped>
.Home {
  padding: 0 5px;
  box-sizing: border-box;
  .banner-box {
    background-color: rgb(244, 244, 244);
    margin-top: 6px;
    .banner {
      img {
        width: 100%;
      }
    }
  }

  .content {
    margin-top: 10px;
    .article-box {
      .article {
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>